
<template>
    <div class="chat-app">
        <div class="sidebar">
            <card></card>
            <list></list>
        </div>
        <div class="main">
            <title></title>
            <message></message>
            <text></text>
        </div>
    </div>
</template>

<script>
// import { actions } from './store';
import Card from './card';
import List from './list';
import Title from './title';
import Text from './text';
import Message from './message';
const actions = null;

export default {
    components: { Card, List, Title , Text, Message,  },
    vuex: {
        actions: actions
    },
    created () {
        this.initData();
    }
}
</script>

<style lang="less" scoped>
.chat-app {
    margin: 20px auto;
    margin-top:60px;
    width: 1000px;
    height: 700px;

    overflow: hidden;
    border-radius: 3px;

    .sidebar, .main {
        height: 100%;
    }
    .sidebar {
        float: left;
        width: 200px;
        color: #f4f4f4;
        background-color: #2e3238;
    }
    .main {
        position: relative;
        overflow: hidden;
        background-color: #eee;
    }
    .title {
        position: absolute;
        width: 100%;
        height:50px;
        top: 0;
        left: 0;
        padding-left:30px;
        padding-top: 15px;
        background-color: #f0f0f0;
        border-bottom: 1px solid #cecece;
    }
    .text {
        position: absolute;
        width: 100%;
        bottom: 0;
        left: 0;
    }
    .message {
        padding-top:50px;
        height: ~'calc(100% - 160px)';
    }
}
</style>
